<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三级地址联动</title>
</head>
  <script  src='./jquery-3.2.1.min.js'></script>
  <script>
    var xmldom =null;
    function showProvince(){
      $.ajax({
          url: './ChinaArea.xml',
          //data:
          dataType:'xml',
          success:function(msg){
          xmldom =msg;
          //console.log(msg);
          //console.log($(msg).find('province'));
            $(msg).find('province').each(function(k,v){

                   var nm = $(this).attr('province');
                   var id = $(this).attr('provinceID');
                   $('#shengfen').append("<option value='"+id+"'>"+nm+"</option>");
            });
          }
      });
	  }
	
	 function showcity (){
       var pid = $('#shengfen option:selected').val();
       var selpro =$(xmldom).find("[provinceID="+pid+"]");
       $('#chengshi').empty();
        selpro.find('City').each(function(k,v){
           var nm =$(this).attr('City');
           var id =$(this).attr('CityID');
           //console.log(nm);
           //console.log(id);
           $('#chengshi').append("<option value='"+id+"'>"+nm+"</option>");
       });
	}
	 function showtown (){
       var pid = $('#chengshi option:selected').val();
       var selpro =$(xmldom).find("[CityID="+pid+"]");
       $('#diqu').empty();
        selpro.find('Piecearea').each(function(k,v){
           var nm =$(this).attr('Piecearea');
           var id =$(this).attr('PieceareaID');
           console.log(nm);
           console.log(id);
           $('#diqu').append("<option value='"+id+"'>"+nm+"</option>");
       });
	}

     $(function(){showProvince();});
  



  </script>
<body>
	<h2>三级地址联动</h2>
	省份：<select name="" id="shengfen" onchange="showcity()">
		<option value="0">-请选择-</option>
	</select>
	城市<select name="" id="chengshi" onchange="showtown()">
		<option value="0">-请选择-</option>
	</select>
	地区<select name="" id="diqu">
		<option value="0">-请选择-</option>
	</select>
</body>
</html>